<script setup>
import { ref , onMounted} from 'vue'
import { useRoute } from 'vue-router';
import axios from 'axios'

const categoryList = ref()
const currentSelected = ref(0)

onMounted(async()=>{
  let {path} = useRoute()
  // 请求后端接口
  // let res = await axios.get('http://127.0.0.1:7003/api/channelList')
  let data = [
    {id:1,name:'推荐',type: 'recommend',path:'/index/recommend'},
    {id:2,name:'穿搭',type: 'dressing',path:'/index/dressing'},
    {id:3,name:'美食',type: 'food',path:'/index/food'},
    {id:4,name:'电影',type: 'movie',path:'/index/movie'},
  ]
  categoryList.value = data
  // 设置当前选中
  currentSelected.value = data.filter(item=>item.path === path)?.[0]?.type
})

</script>

<template>
  <div class="main"> 
    <div class="main-list">
     <div 
      v-for="(item, index) in categoryList"
      :key="item.id"
      :class="index === currentSelected ? 'selected' : ''"
      @click="currentSelected = index"
     >
     <router-link :to="{path: item.path, query: {type: item.type}}">{{ item.name }}</router-link>
    </div>
    </div>
    <!-- 显示当前路由下的子路由页面 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
</style>